<template>
  <div class="my">
    <header :class=" loginStatus ? 'isLogin' :'unLogin'">
      <!-- {{userInfor}} -->
	  <div class="user-infor" v-if="loginStatus">
		  <div class="my-header_background">
		  	<img class="image" :src="userInfor.imgUrl" alt="">
		  </div>
		  <div class="userMsg">
			  <img :src="userInfor.imgUrl" alt="">
			  <span>{{userInfor.nickName}}</span>
		  </div>
		 
	  </div>
	  <div class="login" v-else @click="goLogin" >登录 / 注册</div>
    </header>
    <section>
      <ul>
        <li @click="goPath">地址管理</li>
		<li @click="goTkoen">token</li>
		<li @click="checkTkoen">checkTkoen</li>
		<li v-if="loginStatus" @click="loginOut">退出登录</li>
      </ul>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
import Tabbar from "@/components/common/Tabbar.vue";

import http from "@/common/api/request.js";

export default {
  name: "My",
  data(){
	  return{
		  num:true
	  }
  },
  components: {
    Tabbar,
  },
  computed:{
  	  ...mapState({
		  loginStatus:state =>state.user.loginStatus,
		  userInfor:state=>state.user.userInfor
	  })
  },
  methods: {
	  ...mapMutations(['loginOut',"USER_LOGIN"]),
    //跳转登录页
    goLogin() {
      this.$router.push({
        path: "/userLogin",
      });
    },
	
	//到地址管理页
	goPath(){
		this.$router.push('/path')
	},
	
	//生成token
	goTkoen(){
		console.log('###:',this.num)
		http.$axios({
			url:'/api/getToken',
			method:'post',
			// headers:{
			// 	token:true
			// },
			data:{
				getNum:this.num
			}
		}).then(res=>{
			console.log(res)
			// this.num = false
			// // this.USER_LOGIN( res.data )
			// console.log('###:',this.num)
		})
	},
	
	//验证token
	checkTkoen(){
		console.log('checkTkoen')
		http.$axios({
			url:'/api/chackToken',
			method:'post',
			headers:{
				 authorization:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1bmFtZSI6InpoYW5nc2FuIiwidWFnZSI6MTgsInRpZGlhbiI6InhpdSIsImlhdCI6MTY1OTU5NDMzMywiZXhwIjoxNjU5NTk0MzczfQ.qnL_d3c6TkCkoarVUzL8kBltql55IK9KskgPBZpO_WM",
			}
		}).then(res=>{
			console.log(res)
			// this.num = false
			// // this.USER_LOGIN( res.data )
			// console.log('###:',this.num)
		})
	},
	
  },
};
</script>

<style scoped lang="less">
.my {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;

  .unLogin {
  	position: relative;  
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #b64f4a;
    width: 100%;
    height: 5rem;
  
    .login {
      background-color: #f7aa07;
      color: #fff;
      width: 33%;
      height: 0.8rem;
      line-height: 0.8rem;
      font-size: 0.4rem;
      text-align: center;
      border-radius: 5px;
    }
  }
  .isLogin {
	position: relative;  
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    width: 100%;
    height: 5rem;

    .login {
      background-color: #f7aa07;
      color: #fff;
      width: 33%;
      height: 0.8rem;
      line-height: 0.8rem;
      font-size: 0.4rem;
      text-align: center;
      border-radius: 5px;
    }
	
	.user-infor{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		
		.my-header_background{
			position: absolute;
			width: 100%;
			height: 100%;
			// top:0;
			// right: 0;
			// bottom: 0;
			// left: 0;
			filter: blur(8px);//模糊
			opacity: 0.3;
			
			.image{
				width: 100%;
				height: 100%;
			}
		}
		.userMsg{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			img{
				width: 2rem;
				height: 2rem;
				border:1px solid black;
				border-radius: 50%;
				margin-bottom: 0.125rem;
			}
			span{
				font-size: 0.4rem;
				color: #999;
			}
		}
		
		
	}
  }
  section {
    flex: 1;
    overflow: hidden;

    ul {
      li {
        padding: 0.3rem;
        font-size: 0.4rem;
        height: 0.3125rem;
      }
    }
  }
}
</style>
